<template>
  <a-modal
    title="直播详情"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    @ok="handleCancel"
    cancelText="关闭"
    class="pop-table pop-title-bg-white"
    :closable="false"
  >
    <a-row style="text-align: center;margin-top:20px">
      <a-col :span="6">
        <p>
          <span style="font-size: 18px;">当前在线人数：</span>
          <span style="font-size: 24px;font-weight: bold;">0</span><!--{{current.onlineNumNow}}-->
        </p>
      </a-col>
      <a-col :span="6">
        <p>
          <span style="font-size: 18px;">峰值人数：</span>
          <span style="font-size: 24px;font-weight: bold;">{{current.onlineNumPeakValue}}</span>
        </p>
      </a-col>

    </a-row>
    <a-row style="margin-top:15px;margin-bottom:30px">
      <a-col :span="11" style="background:#F5F5F5;border-radius:5px;border:1px solid #C0C0C0;margin-left:50px">
        <div style="display:flex;justify-content:space-between;">
          <div>
            <a-avatar
              size="large"
              src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
            />
            <span>{{data.userId}}</span>
          </div>
          <div style="margin-right:10px">
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
            <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
          </div>
        </div>
        <div style="width:100%;height:400px;margin:30px 0">
          <img style="width: 100%;height: 100%;" :src="data.coverUrl">
        </div>
      </a-col>
      <a-col :span="11" style="padding-left:50px">
        <div style="width:100%;height:500px;border:1px solid #C0C0C0;">
          <div
            style="width:100%;
            height:40px;
            line-height:40px;
            text-align:center
            ;padding:0 10px;
            background:#F5F5F5;
            border-bottom:1px solid #C0C0C0;
            display:flex;
            justify-content:space-between;"
          >
            <span>{{commentNum}}评论</span>
            <span @click="open">
              {{ status ? '隐藏' : '展开' }}
              <a-icon :type="status ? 'down' : 'up'"/>
            </span>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
  import {deleteAction, getAction, httpAction, postAction} from '@/api/manage'

  export default {
    data() {
      return {
        visible: false,
        confirmLoading: false,
        status: true,
        data: {},
        commentNum: 0,
        current: {},
        comment: [],
      }
    },
    methods: {
      detail(data) {
        this.data = data
        this.visible = true
        this.getCountData(data)
        this.getCommentData(data)
        this.getCurrentCountData(data)
      },
      getCountData(data) {
        getAction('/liveManage/liveInfo/queryLiveCommentByIdCount', {id: data.id}).then(res => {
          if (res.success) {
            this.commentNum = res.result
          }
        })
      },
      getCurrentCountData(data) {
        getAction('/liveManage/liveInfo/queryById', {id: data.id}).then(res => {
          if (res.success) {
            this.current = res.result
          }
        })
      },

      getCommentData(data) {
        getAction('/liveManage/liveInfo/liveCommentlist', {liveId: data.id}).then(res => {
          if (res.success) {
            this.comment = res.result.records
          }
        })
      },
      closePermission() {

        postAction('/liveManage/liveInfo/forbidLiveStream?id=' + this.data.id + "&streamId=" + this.data.streamId, {}).then(res => {
          if (res.success) {
            this.close()
          }
        })
      },
      // 禁言
      estoppel(data) {

        getAction('/liveManage/liveInfo/updateLiveEstoppel', {id: data.commentUserId}).then(res => {
          if (res.success) {
            console.log('res====>', res)
          }
        })
      },
      // 解除禁言
      unEstoppel() {
        getAction('/liveManage/liveInfo/updateRelieveEstoppelById', {id: data.commentUserId}).then(res => {
          if (res.success) {
            console.log('res====>', res)
          }
        })
      },
      open() {
        this.status = !this.status
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      }
    }
  }
</script>

<style>
  .open {
    margin-left: 5px;
  }

  .hide {
    display: none;
  }

  .video-player .vjs-custom-skin {
    width: 100%;
    height: 400px;
  }

  .video-js {
    height: 400px !important;
  }

  .vjs-tech {
    width: 100%;
    height: 100%;
  }
</style>